import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  selector: 'app-input-group-demo',
  standalone: true,
  imports: [NzInputModule, NzButtonModule, NzIconModule],
  template: `
    <div class="demo">
      <nz-input-group nzSuffixIcon="search">
        <input nz-input placeholder="search" />
      </nz-input-group>

      <nz-input-group [nzAddOnAfter]="searchIcon" nzSearch class="my-2">
        <input nz-input placeholder="search" />
      </nz-input-group>
      <ng-template #searchIcon>
        <button nz-button nzType="primary">
          <span nz-icon nzType="search"></span>
        </button>
      </ng-template>

      <nz-input-group [nzAddOnAfter]="searchButton" nzSearch class="my-2">
        <input nz-input placeholder="search" />
      </nz-input-group>
      <ng-template #searchButton>
        <button nz-button nzType="primary">Search</button>
      </ng-template>
    </div>
  `,
})
export class InputSearchComponent {}
